<template>
  <div>
    <!-- 弹框 -->
    <el-dialog title="新增路线" :visible="isShowDialog" @close="btnCancel">
      <el-form ref="form" :rules="rules" :model="form">
        <el-form-item label="线路编号" prop="number" label-width="100px">
          <el-input v-model="form.number">
            XL
          </el-input>
        </el-form-item>
        <el-form-item label="线路名称" prop="name" label-width="100px">
          <el-input v-model="form.name" placeholder="请输入线路名称" />
        </el-form-item>
        <el-form-item label="线路类型" prop="type" label-width="100px">
          <el-input v-model="form.type" placeholder="请输入线路类型" />
        </el-form-item>
        <el-form-item label="起始地机构" prop="startOrganName" label-width="100px">
          <!-- <el-input v-model="form.startOrganName" placeholder="请输入起始地机构" /> -->
          <!-- <el-cascader
            v-model="form.startOrganName"
            placeholder="请选择起始地机构"
            :options="options"
            @change="handleChange"
          /> -->
          <!-- <el-input
            v-model="form.startOrganName"
            placeholder="请选择起始地机构"
            clearable=""
            @focus="isShowTree=true"
          />
          <el-tree
            v-if="isShowTree"
            v-model="form.startOrganName"
            class="myTree"
            :data="options"
            @node-click="deptSelect"
          /> -->

          <el-select
            v-model="form.startOrganName"
            placeholder="请选择起始地机构"
            clearable
          >
            <el-option hidden :value="options.id" :label="options.name" />
            <el-tree accordion :data="options" :props="{label:'name'}" @node-click="deptSelect" />

          </el-select>

          <!-- <el-select v-model="form.startOrganName">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select> -->

        </el-form-item>
        <el-form-item label="目的地机构" prop="endOrganName" label-width="100px">
          <!-- <el-input v-model="form.endOrganName" placeholder="请输入目的地机构" /> -->
          <!-- <el-cascader
            v-model="form.endOrganName"
            placeholder="请选择目的地机构"
            :options="options"
            @change="handleChange"
          /> -->

          <!-- <el-input
            v-model="form.endOrganName"
            placeholder="请选择目的地机构"
            clearable=""
            @focus="isShowTree1=true"
          />
          <el-tree
            v-if="isShowTree1"
            class="myTree"
            :data="options"
            @node-click="deptSelect1"
          /> -->

          <!-- <el-select v-model="form.endOrganName">
            <el-option
              v-for="item1 in options"
              :key="item1.value"
              :label="item1.label"
              :value="item1.value"
            />
          </el-select> -->

          <el-select
            v-model="form.endOrganName"
            placeholder="请选择起始地机构"
            clearable
          >
            <el-option hidden :value="options.id" :label="options.name" />
            <el-tree accordion :data="options" :props="{label:'name'}" @node-click="deptSelect1" />

          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="btnOK">确认</el-button>
          <el-button @click="btnCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import { getTree } from '@/api/modules/scheduling/transportationTask'
import { addTransportLine } from '@/api/line'
export default {
  props: {
    isShowDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 默认情况下，属性不出现
      isShowTree: false,
      isShowTree1: false,
      options: [{
        label: '东北装运中心',
        children: [{
          label: '沈阳分拣中心',
          children: [
            { label: '和平区营业部' },
            { label: '皇姑区营业部' }
          ]
        }]
      },
      {
        label: '华北转运中心',
        children: [{
          label: '北京分拣中心',
          children: [
            { label: '昌平区营业部' },
            { label: '顺义区营业部' }
          ]
        }, {
          label: '华南转运中心',
          children: [
            { label: '深圳分拣中心', children: [{ label: '宝安区营业部' }, { label: '光明区营业部' }] },
            { label: '广州分拣中心', children: [{ label: '越秀区分拣中心' }, { label: '花都区营业部' }] }
          ]
        }]
      }, {
        label: '华中转运中心',
        children: [{
          label: '武汉分拣中心',
          children: [
            { label: '江汉营业部' },
            { label: '武昌营业部' }
          ]
        }]
      }, {
        label: '华东转运中心',
        children: [{
          label: '上海分拣中心',
          children: [{ label: '虹口区营业部' }, { label: '浦东新区营业部' }]
        }]
      },
      {
        label: '西南转运中心',
        children: [{
          label: '成都分拣中心',
          children: [{ label: '金牛区营业部' }, { label: '青羊区区营业部' }]
        }]
      },
      {
        label: '西北转运中心',
        children: [{
          label: '西安分拣中心',
          children: [{ label: '碑林区营业部' }, { label: '长安区营业部' }]
        }]
      }
      ],
      form: {
        // number: '',
        // name: '',
        // type: '',
        // startOrganName: '',
        // endOrganName: '',
        cost: 0,
        created: 0,
        distance: 0,
        endOrganId: 0,
        endOrganName: '',
        extra: '',
        id: 0,
        name: '',
        number: '',
        startOrganId: 0,
        startOrganName: '',
        time: 0,
        type: 0,
        updated: 0
      },
      rules: {
        number: [{ required: true, message: '线路编号不能为空', trigger: 'blur' },
          { message: '线路编号前两位为XL，后6位为数字，请重新输入', trigger: 'blur' }
        ],
        name: [{ required: true, message: '线路名称不能为空', trigger: 'blur' }],
        startOrganName: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
        endOrganName: [{ required: true, message: '内容不能为空', trigger: 'blur' }]
      }

    }
  },
  async created() {
    // 树形解构机构
    const res = await getTree()
    console.log(JSON.parse(res.data))
    this.options = JSON.parse(res.data)
  },

  methods: {
    async btnOK() {
      console.log(this.form)
      if (this.form.type === '干线') this.form.type = 1
      if (this.form.type === '支线') this.form.type = 2
      if (this.form.type === '接驳路线') this.form.type = 3
      // 新增
      const res = await addTransportLine(this.form)
      console.log(res)
    },
    btnCancel() {
      this.$emit('closeDialog')
    },
    handleChange() {},
    // 部门选中后的操作
    deptSelect(data) {
      console.log(data)
      // 赋值
      this.form.startOrganName = data.name
      // 关闭弹窗
      this.isShowTree = false
    },
    deptSelect1(data) {
      // 赋值
      this.form.endOrganName = data.name
      // 关闭弹窗
      this.isShowTree1 = false
    }
  }
}
</script>

<style scoped>
.el-dialog__header {
background-color: #f3f4f7;
border-radius: 8px 8px 0 0;
}
.el-dialog__body{
  padding: 40px 66px 0 50px!important;
}
</style>
